import { Empty,Modal } from 'antd';
import { useEffect, useState } from 'react';
import { GetRecords } from '../../../api/Home/index';
import LoginStore from '../../../store/Login/index';
import { List } from 'antd';
import MarkdownToJsx from '../../../components/MarkdownToJsx/MarkdownToJsx';
const ThumbUpsList = ({ status }) => {

    const { userInfo } = LoginStore();//获取用户信息

    const [ArticleList, setArticleList] = useState([]);//点赞文章数据

    const [ArticleDetail, setArticleDetail] = useState({});//当前文章详情

    useEffect(() => {
        GetRecords(userInfo.id).then(({ data }) => {//获取用户点赞列表
            console.log('data', data.data);

            setArticleList(data.data);
        })
    }, [])

    const [isArticleDetailModalOpen, setIsArticleDetailModalOpen] = useState(false);//文章模态框显示

    const showArticleDetailModal = (item) => {//显示文章详情模态框

        setArticleDetail(item);

        setIsArticleDetailModalOpen(true);
    }

    const handleArticleDetailOk = () => {
        setIsArticleDetailModalOpen(false);
    };

    const handleArticleDetailCancel = () => {
        setIsArticleDetailModalOpen(false);
    };

    if (status) {
        return (
            <>
                <Modal
                    width={1000}
                    title={ArticleDetail.title}
                    closable={{ 'aria-label': 'Custom Close Button' }}
                    open={isArticleDetailModalOpen}
                    onOk={handleArticleDetailOk}
                    onCancel={handleArticleDetailCancel}
                >
                    <MarkdownToJsx content={ArticleDetail.content}/>
                </Modal>
                <div style={{ marginTop: "20px" }}>
                    {
                        ArticleList.length === 0
                            ? <Empty description={"你还没有点赞任何文章哦!"} />
                            : <List
                                size="large"
                                bordered
                                dataSource={ArticleList}
                                renderItem={item => <List.Item onClick={() => { showArticleDetailModal(item) }}>{item.title}</List.Item>}
                            />
                    }

                </div>
            </>
        )
    }
}

export default ThumbUpsList;